<template>
  <div class="wrapper">
    <div class="productDetailSwipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in gallery" :key="item.id">
          <img
            :src="item.img_url"
            alt="图片加载失败"
            class="productDetailSwipe__img"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <Tips />
    <div class="info">
      <div class="title">{{ info.name }}</div>
      <div class="goods_brief">{{ info.goods_brief }}</div>
      <div class="retail_price">
        ￥{{ parseInt(info.retail_price).toFixed(2) }}元
      </div>
    </div>
    <van-cell title="展示弹出层" is-link />

    <div class="attribute">
      <h3 class="attribute__title">商品参数</h3>
      <ul>
        <li
          v-for="(item, index) in attribute"
          :key="index"
          class="attribute_item"
        >
          <div class="left">{{ item.name }}:</div>
          <div class="right van-ellipsis">{{ item.value }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { GetGoodsDetail } from '../request/api.js'
import Tips from '../components/Tips.vue'
export default {
  name: 'ProductDetail',
  data() {
    return {
      // 产品轮播图
      gallery: [],
      // 产品信息
      info: {},
      // 产品的属性
      attribute: [],
      // 产品的描述
      desc: ''
    }
  },
  components: {
    Tips
  },
  created() {
    // console.log(this.$route.query.id)
    const id = this.$route.query.id
    GetGoodsDetail({ id: id }).then(res => {
      console.log(res.data)
      const { gallery, info, attribute } = res.data
      this.gallery = gallery
      this.info = info
      this.attribute = attribute
    })
  }
}
</script>
<style lang="less" scoped>
.productDetailSwipe {
  width: 100%;
  height: 3rem;
  .productDetailSwipe__img {
    width: 100%;
    height: 3rem;
  }
}
.info {
  background: #fff;
  text-align: center;
  line-height: 0.4rem;
  border-bottom: 0.02rem solid #ccc;
  .title {
    font-size: 0.2rem;
  }
  .retail_price {
    color: red;
  }
}
.attribute {
  background: #fff;
  padding: 0 5%;
  .attribute__title {
    font-size: 0.2rem;
    margin-bottom: 0.1 rem;
  }
}
.attribute_item {
  display: flex;
  line-height: 0.35rem;
  background: #eee;
  margin-bottom: 0.1rem;
  border-radius: 0.02rem;
  .left {
    flex: 3;
    text-align: right;
    margin-right: 0.1rem;
  }
  .right {
    flex: 7;
    text-align: left;
    font-size: 0.18rem;
  }
}
</style>
